@charset "UTF-8";
@import "../yo/lib/element/yo-loading";

@include yo-loading(
  $name: a,
  $ico-color: red
);
@include yo-loading(
  $name: b,
  $ico-color: blue
) {
  i {
    margin-left: 100px;
  }
};

.m-index {
  section {
    .m-position {
      .login {
        @include flexbox();
        height: .43rem;
        width: 100%;
        span {
          &:last-child {
            padding: .05rem .1rem 0 0;
            a {
              display: block;
              width: .8rem;
              height: .3rem;
              background: #f5f5f5;
              color: $base-color;
              line-height: .3rem;
              text-align: center;
              @include border-radius(.15rem);
            }
          }
          &:first-child {
            @include flex();
            width: 100%;
            line-height: .43rem;
            padding-left: .1rem;
          }
        }
      }
      .list {
        ul {
          width: 100%;
          @include border(0 0 1px 0);
          li {
            @include border(1px 0 0 0);
            width: 100%;
            dl {
              @include flexbox();
              dt {
                width: .8rem;
                img {
                  width: 100%;
                }
                padding: .1rem;
              }
              dd:nth-child(2) {
                @include flex();
                padding-top: .1rem;
                p {
                  line-height: 20px;
                  &:first-child {
                    font-size: 16px;
                  }
                  &:nth-child(2) {
                    font-size: 12px;
                    @include ellipsis(null, 1);
                  }
                  &:last-child {
                    font-size: 12px;
                    color: #888;
                  }
                }
              }
              dd:last-child {
                width: .8rem;
                line-height: .8rem;
                text-align: right;
                padding-right: .1rem;
                font-size: 16px;
                color: $base-color;
              }
            }
          }
        }
      }
    }

    .head {
      text-align: center;
      height: .4rem;
      line-height: .4rem;
    }
    .head img {
      display: inline-block;
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transition: transform 150ms;
      -webkit-transition: transform 150ms;
      width: .15rem;
      height: .15rem;
    }
    .up {
      transform: rotate(360deg) !important;
      -webkit-transform: rotate(360deg) !important;
    }
    .foot {
      text-align: center;
      height: .4rem;
      line-height: .4rem;
    }
    .foot img {
      display: inline-block;
      /*transform: rotate(0deg);*/
      /*-webkit-transform: rotate(0deg);*/
      transition: transform 150ms;
      -webkit-transition: transform 150ms;
      width: .15rem;
      height: .15rem;
      margin-bottom: .04rem;
    }
    .down {
      transform: rotate(180deg) !important;
      -webkit-transform: rotate(180deg) !important;
    }
  }
}
